<template>
	<view>
		

		<view class="reg_box">
			<view class="logoCon">
				<view class="logoPic">
					<image src="/static/logo.png" mode=""></image>
				</view>
				<view class="logoName">记工本记账</view>
			</view>

			<form @submit="regSubmit">
				<view class="regForm">
					<view class="regItem">
						<image src="/static/login/regIcon01.png" mode="" class="regIcon"></image>
						<view class="regCon">
							<input type="number" class="regInput" name="mobile" placeholder='请输入手机号'
								placeholder-class="placeholderColor" maxlength="11" @input="inputMobile"></input>
						</view>
					</view>
					<view class="regItem">
						<image src="/static/login/regIcon02.png" mode="" class="regIcon"></image>
						<view class="regCon">
							<input type="password" class="regInput" name="code" placeholder='请输入验证码'
								placeholder-class="placeholderColor"></input>
							<button class="codeBtn" :disabled="disabled" @click="getCode">{{time}}</button>
						</view>
					</view>
				</view>
				
				<view class="regPost_con">
					<button form-type="submit" class="regBtn">登 录</button>
				</view>
				
				<view class="regNotice">
					如果您是微信小程序“记工本”老用户，请选择微信登陆，如果小程序上面已经记工，且未完善信息，将无法同步数据!
				</view>
			</form>

			<!-- #ifdef MP-WEIXIN -->
			<!-- 微信快捷登录:小程序 -->
			<view class="loginBtm_con" @click="wxFastLogin">
				<view class="wxIcon">
					<u-icon name="weixin-circle-fill" color="#50B674" size="100"></u-icon>
				</view>
				<view class="wxLogin">微信快捷登录</view>
			</view>
			<!-- #endif -->

		
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 短信验证码
				mobile: '',
				interval: '',
				time: '获取验证码',
				currentTime: 61,
				disabled: false,
				osType:'',
				isOpenWx:1,
				os:'wxapp',
			};
		},
		
		onShow() {
			var _this = this;
			let platform = uni.getSystemInfoSync().platform;
			_this.getOpenWx();
			_this.os=uni.getStorageSync('os');
			
		},
		methods: {
			// 获取手机号码
			inputMobile: function(e) {
				// console.log(e)
				var _this = this;
				_this.mobile = e.detail.value;
			},
			
			getOpenWx: function() {
				var _this = this;
				_this.$u.get('/api/index/getAppale', {
						
					})
					.then(res => {
						console.log(res.data);
						_this.isOpenWx=res.data;
						
					})
					.catch(res => {
						console.log(res);
					});
			},
			
			// 点击获取验证码
			getCode: function() {
				var _this = this;
				var verifyMobile = _this.$u.test.mobile(_this.mobile); // 校验手机号
				if (verifyMobile) {
					_this.codeBtn_tips();
					_this.disabled = true;
					_this.sendSms();
				} else {
					uni.showToast({
						title: '输入手机号格式不正确',
						icon: 'none'
					});
				}
			},

			// 发送验证码
			sendSms: function() {
				var _this = this;
				_this.$u
					.get('/api/plus.sms/getCode', {
						mobile: _this.mobile
					})
					.then(res => {
						console.log('==获取短信验证码==');
						console.log(res);
						uni.hideLoading();
						uni.showToast({
							title: '验证码已发送',
							icon: 'none'
						});
					})
					.catch(res => {
						console.log(res);
					});
			},

			// 修改按钮文字
			codeBtn_tips: function(options) {
				var _this = this;
				var currentTime = _this.currentTime;
				_this.interval = setInterval(function() {
					currentTime--;
					_this.time = currentTime + '秒后重发';
					if (currentTime <= 0) {
						clearInterval(_this.interval);
						_this.time = '重新发送';
						_this.currentTime = 61;
						_this.disabled = false;
					}
				}, 1000);
			},

			// 提交
			regSubmit(e) {
				// console.log(e);
				var _this = this;
				var formData = e.detail.value;

				if (!formData.mobile) {
					uni.showModal({
						content: '手机号码不能为空',
						showCancel: false
					});
					return;
				}

				if (!formData.code) {
					uni.showModal({
						content: '验证码不能为空',
						showCancel: false
					});
					return;
				}

				_this.$u.post('/api/user.reg/loginByCode', formData)
					.then(res => {
						console.log(res);
						uni.showToast({
							title: res.msg,
							duration: 2000
						});

						// 缓存token
						uni.setStorageSync('token', res.data.token);

						// 缓存用户信息
						uni.setStorageSync('userInfor', JSON.stringify(res.data.userinfo));

						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/index/index'
							});
						}, 1000);
					})
					.catch(res => {
						console.log(res);
					});
			},

			// 页面跳转
			goPage(url) {
				uni.navigateTo({
					url: url
				});
			},
			
			// 微信快捷登录:小程序
			wxFastLogin: function() {
				var _this = this;
				// 授权
				uni.getUserProfile({
					desc: '获取您的头像和昵称',
					lang: 'zh_CN',
					success: res => {
						uni.login({
							success: function(loginRes) {
								console.log(loginRes);
								_this.$u
									.get('/api/Login/wx_app_login', {
										code: loginRes.code,
										mode: 'empower',
										rawData: res.rawData,
										signature: res.signature,
										encryptedData: res.encryptedData,
										iv: res.iv,
									})
									.then(res => {
										console.log('==小程序快捷登录==');
										console.log(res);
						
										uni.showToast({
											title: res.msg,
											duration: 2000
										});
						
										// 缓存token
										uni.setStorageSync('token', res.data.token);
						
										// 缓存用户信息
										uni.setStorageSync('userInfor', JSON.stringify(res.data));
						
										setTimeout(function() {
											uni.reLaunch({
												url: '/pages/index/index'
											});
										}, 1000);
									})
									.catch(res => {
										console.log(res);
									});
							}
						});
					}
				});
			},

			// 微信快捷登录:app
			appFastLogin: function() {
				var _this = this;
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						console.log(res.provider);
						//支持微信、qq和微博等
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									console.log('==app快捷登录==');
									console.log(loginRes);

									// 获取用户信息
									uni.getUserInfo({
										provider: 'weixin',
										success: function(inforRes) {
											console.log('==获取用户信息==');
											console.log(inforRes);

											_this.$u
												.post('/api/user.reg/appWxLogin', {
													unionId: inforRes.userInfo.unionId,
													userInfo:inforRes.userInfo,
												})
												.then(res => {
													console.log(res);

													// 缓存token
													uni.setStorageSync('token',
														res.data.token);

													// 缓存用户信息
													uni.setStorageSync(
														'userInfor', JSON
														.stringify(res
															.data));

													setTimeout(function() {
														uni.reLaunch({
															url: '/pages/index/index'
														});
													}, 1000);
												})
												.catch(res => {
													console.log(res);
												});
										}
									});
								},
								fail: function(res) {
									console.log('App微信获取用户信息失败', res);
								}
							});
						}
					}
				});
			}
		}
	};
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	button {
		padding: 0;
		margin: 0;
		background: transparent;
		height: 100%;
		line-height: inherit;
		font-size: inherit;
	}

	button::after {
		border: 0;
		background-color: none;
	}

	.reg_box {
		padding: 0 60rpx;
	}

	// logo
	.logoCon {
		padding: 60rpx 0;
		text-align: center;
		overflow: hidden;
	}

	.logoPic {
		width: 100%;
		overflow: hidden;
	}

	.logoPic image {
		width: 160rpx;
		height: 160rpx;
	}

	.logoName {
		font-size: 32rpx;
		color: #333;
		margin-top: 20rpx;
	}

	// 表单
	.regForm {
		overflow: hidden;
	}

	.regItem {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		padding: 0 10rpx 0 40rpx;
		background: #fff;
		border: 1rpx solid #e2e2e2;
		border-radius: 42rpx;
		box-sizing: border-box;
		overflow: hidden;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
	}

	.regIcon {
		width: 40rpx;
		height: 40rpx;
	}

	.regCon {
		flex: 2;
		margin-left: 20rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.regInput {
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		text-align: left;
		font-size: 28rpx;
	}

	.regInput.codeInput {
		float: left;
		width: 220rpx;
	}

	.codeBtn {
		float: right;
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		color:#327FE8;
		background: #f4f4f4;
		border-radius:30rpx;
		overflow: hidden;
	}

	// 方式
	.regOption {
		padding-bottom: 40rpx;
		font-size: 28rpx;
		color: #666;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	// 注册
	.regPost_con {
		text-align: center;
		overflow: hidden;
	}

	.regPost_con .regBtn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background:#327FE8;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		border-radius: 42rpx;
		overflow: hidden;
	}

	// 微信快捷登录
	.loginBtm_con {
		text-align: center;
		overflow: hidden;
		position: fixed;
		bottom: 90rpx;
		left: 0;
		right: 0;
	}

	.loginBtm_con .wxIcon image {
		width: 100%;
	}

	.loginBtm_con .wxLogin {
		width: 100%;
		font-size: 28rpx;
		color: #666;
		margin-top: 10rpx;
	}
	
	.regNotice{
		line-height: 40rpx;
		color: #666;
		margin-top: 40rpx;
	}
</style>
